import React, { memo } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeItem, deleteItem } from '../features/todoList'

const Body = memo(() => {
    const dispatch = useDispatch()
    let list = useSelector(state => state.todoList.list)
    let key = useSelector(state => state.todoList.key)
    let showList = []
    if (key === 'all') {
        showList = [...list]
    } else if (key === 'ok') {
        showList = [...list.filter(item => item.isDone)]
    } else if (key === 'no') {
        showList = [...list.filter(item => !item.isDone)]
    }
    return (
        <div>
            {showList.map(item =>
                <div
                    key={item.id}
                    style={{
                        height: '50px',
                        backgroundColor: '#eee',
                        marginTop: '5px',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}>
                    <input type="checkbox"
                        checked={item.isDone}
                        onChange={() => dispatch(changeItem(item.id))}

                    />
                    <span> {item.value}</span>
                    <button onClick={() => dispatch(deleteItem(item.id))}>删除</button>
                </div>)}
        </div>
    )
})

export default Body